<template>
    <div class="contact">
        <div class="contact-header">
            <h1>联系我们</h1>
            <p class="subtitle">有问题或建议？请随时与我们联系</p>
        </div>

        <div class="contact-content">
            <div class="contact-info">
                <div class="info-card">
                    <div class="info-icon">
                        <i class="icon-location"></i>
                    </div>
                    <h3>地址</h3>
                    <p>北京市朝阳区科技园A座1001室</p>
                </div>

                <div class="info-card">
                    <div class="info-icon">
                        <i class="icon-email"></i>
                    </div>
                    <h3>电子邮件</h3>
                    <p>contact@jianyueblog.com</p>
                </div>

                <div class="info-card">
                    <div class="info-icon">
                        <i class="icon-phone"></i>
                    </div>
                    <h3>电话</h3>
                    <p>+86 10 8888 7777</p>
                </div>
            </div>

            <div class="contact-form-container">
                <h2>发送消息</h2>
                <form class="contact-form" @submit.prevent="handleSubmit">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input
                            type="text"
                            id="name"
                            v-model="formData.name"
                            placeholder="请输入您的姓名"
                            required
                        />
                    </div>

                    <div class="form-group">
                        <label for="email">电子邮件</label>
                        <input
                            type="email"
                            id="email"
                            v-model="formData.email"
                            placeholder="请输入您的电子邮件"
                            required
                        />
                    </div>

                    <div class="form-group">
                        <label for="subject">主题</label>
                        <input
                            type="text"
                            id="subject"
                            v-model="formData.subject"
                            placeholder="请输入消息主题"
                            required
                        />
                    </div>

                    <div class="form-group">
                        <label for="message">消息</label>
                        <textarea
                            id="message"
                            v-model="formData.message"
                            placeholder="请输入您的消息"
                            rows="5"
                            required
                        ></textarea>
                    </div>

                    <button type="submit" class="submit-btn">发送消息</button>
                </form>
            </div>
        </div>

        <div class="map-container">
            <h2>我们的位置</h2>
            <div class="map-placeholder">
                <!-- 实际项目中这里可以放置地图组件 -->
                <div class="map-image"></div>
                <p class="map-note">地图加载中...</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from "vue";

const formData = reactive({
    name: "",
    email: "",
    subject: "",
    message: "",
});

const handleSubmit = () => {
    // 这里应该有实际的表单提交逻辑
    console.log("表单数据:", formData);
    alert("感谢您的留言！我们会尽快回复。");

    // 重置表单
    formData.name = "";
    formData.email = "";
    formData.subject = "";
    formData.message = "";
};
</script>

<style scoped>
.contact {
    padding-bottom: 60px;
}

.contact-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-header h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #3498db;
}

.subtitle {
    font-size: 1.2rem;
    color: #777;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    margin-bottom: 50px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
}

.info-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #3498db;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card h3 {
    margin-bottom: 10px;
    color: #2c3e50;
}

.info-card p {
    color: #555;
}

.contact-form-container {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.contact-form-container h2 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: #2c3e50;
    position: relative;
    padding-bottom: 10px;
}

.contact-form-container h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #3498db;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

textarea {
    resize: vertical;
}

.submit-btn {
    padding: 12px 25px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #2980b9;
}

.map-container {
    margin-top: 50px;
}

.map-container h2 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: #2c3e50;
    position: relative;
    padding-bottom: 10px;
}

.map-container h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: #3498db;
}

.map-placeholder {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.map-image {
    height: 400px;
    background-color: #f5f5f5;
    background-image: url("https://picsum.photos/id/1016/1200/400");
    background-size: cover;
    background-position: center;
}

.map-note {
    padding: 15px;
    text-align: center;
    color: #777;
}

/* 图标样式 */
.icon-location::before {
    content: "📍";
}

.icon-email::before {
    content: "✉️";
}

.icon-phone::before {
    content: "📞";
}

@media (max-width: 768px) {
    .contact-content {
        grid-template-columns: 1fr;
    }

    .contact-info {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .info-card {
        flex: 1;
        min-width: 200px;
    }
}
</style>
